/*
 * @Author: jiangyg email@jiangyg.com
 * @Date: 2022-10-28 20:14:30
 * @LastEditors: jiangyg email@jiangyg.com
 * @LastEditTime: 2022-11-01 05:39:57
 * @FilePath: /frontend/mall-frontend/vite.config.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import path from "path";
import { fileURLToPath, URL } from "node:url";

import { UserConfigExport, ConfigEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import Icons from "unplugin-icons/vite";
import { viteMockServe } from "vite-plugin-mock";
import IconsResolver from "unplugin-icons/resolver";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

const pathSrc = path.resolve(__dirname, "src");

// https://vitejs.dev/config/
export default ({ command, mode }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      vue(),

      vueJsx(),

      AutoImport({
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ["vue"],

        resolvers: [
          // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
          ElementPlusResolver(),

          // 自动导入图标组件
          IconsResolver({
            prefix: "Icon",
          }),
        ],

        // dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
      }),

      Components({
        resolvers: [
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),

          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ["ep"],
          }),
        ],

        // dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
      }),

      Icons({
        autoInstall: true,
      }),

      viteMockServe({
        mockPath: "./src/mock",
        localEnabled: command === 'serve' && mode === 'development',
      }),
    ],
    resolve: {
      alias: {
        "@": pathSrc,
        'vue': 'vue/dist/vue.esm-bundler.js'
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          // 两种方式都可以
          additionalData: '@import "@/assets/scss/variables.scss";',
          // additionalData: '@use "@/assets/scss/variables.scss" as *;'
        },
      },
    },
  };
};
